<template>
  <!--操作栏-->
  <div class="oprateContainer">
      <div class="opTop"></div>
      <div class="mb-4" style="margin-bottom:22px">
        <el-button @click="clickShowAll" type="success" class="nextBtn">全部</el-button>      
        <el-button @click="clickNextDay" type="success" class="nextBtn">下一天<el-icon class="el-icon--right" plain><ArrowRight /></el-icon></el-button>
        <el-input-number ref="number" v-model="num" :min="0" :max="10000" class="inputDays" @change="handleChange" />
        
      </div>
      
    </div>
</template>

<script>
export default {
    data() {
      return {
        num:0,
      }
    },
    props: {
      onEvent: Function
    },
    methods: {
      clickNextDay() {
        this.num = this.num > 1 ? this.num - 1 : 0 
      },
      clickShowAll() {
        this.num = 0
      },
      handleChange(val) {
        this.num = val
      },
    },
    watch: {
      num(newValue, oldValue) {
        this.onEvent(newValue)
      },
    },
}
</script>

<style scoped>
.oprateContainer {
  flex: 13; 
}
.opTop {
  height: 30%;
}
.nextBtn {
  font-size: 15px;
  font-weight: bold;
}
.inputDays {
  margin-top:30px;
}
</style>
